<template>
  <common-card title="今日销售额" :value="numberFormat(salesToday)">
    <template #default>
      <div class="compare-wrap">
        <div class="compare">
          <div>日同比</div>
          <div class="compare-span">{{ numberFormat(salesGrowthLastDay) }}</div>
          <div class="decrement"></div>
        </div>
        <div class="compare">
          <div>月同比</div>
          <div class="compare-span">
            {{ numberFormat(salesGrowthLastMonth) }}
          </div>
          <div class="increment"></div>
        </div>
      </div>
    </template>
    <template #footer>
      <span>昨日销售额</span>
      <span class="emphasis">{{ moneyFormat(salesLastDay) }}</span>
    </template>
  </common-card>
</template>

<script lang="ts">
import CommonCard from "./CommonCard.vue"
export default {
  name: "TodaySales",
  components: { CommonCard },
}
</script>
<script lang="ts" setup>
import { ref, computed } from "vue"
import { useReportDataStore } from "@/stores/reportData"
import useFormat from "@/hooks/useFormat"
const { numberFormat, moneyFormat } = useFormat()
// 获取Stores实例
const reportDataStore = useReportDataStore()

// 使用计算属性简化Stores数据代码
// 1.1 今日销售额
const salesToday = computed(() => reportDataStore.reportData.salesToday)
// 1.2 昨日销售额
const salesLastDay = computed(() => reportDataStore.reportData.salesLastDay)
// 1.3 日同比
const salesGrowthLastDay = computed(
  () => reportDataStore.reportData.salesGrowthLastDay
)
// 1.4 月同比
const salesGrowthLastMonth = computed(
  () => reportDataStore.reportData.salesGrowthLastMonth
)
</script>

<style lang="scss" scoped>
.compare-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 700;
  color: #666;
  .compare {
    flex: 1;
    display: flex;
    align-items: center;
    .compare-span {
      margin: 0px 5px;
    }
  }
}
</style>
